<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jQuery_class_stu/jquery.js"></script>
<script type="text/javascript">
/*
 셀렉터.animate() - 선택된 dom 노드에 애니메이션 효과를 주는 함수 
 				  - 매개변수로 설정한 style로 변환 되도록 처리.
 매개변수 : 1. css(style) 속성 - javascript객체
 			2. 애니메이션 효과 시간 : 밀리초, "fast" , "slow" (생략가능)
 			3. 애니메이션 효과 종료후 호출될 callback 함수 (생략가능)

 */
 
$(document).ready(function() {
	$("#btn1").on("click", function(){
		$("#divLayer").animate({"width":1000, "height":1000, "opacity":0.1});
	});
	
});
</script>

<style type="text/css">
div#divLayer{
	margin:10px;
	width:100px;
	height:100px;
	background:blue;
}
</style>
</head>
<body>
<div id="divLayer">
<button id="btn1">늘리기</button>
<button id="btn2">원래크기</button>
</div>

</body>
</html>
